<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网易云</title>
    <link rel="stylesheet" href="css/网易云.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.js"></script>
</head>
<body>
   
    <div class="music-box">
        <img class="play-item" src="images/play-item.png" alt="">
       <p><img  class="bg pause" src="images/bg.png" alt=""></p>
       <p><img  class="play-btn" src="images/pause.png" alt=""></p>
    </div>
    <script>
        // 1.播放按钮能正常切换
        let isPlay = false;
        $(".play-btn").click(function(){
            if(isPlay){
                isPlay = false;
                $(this).attr("src","images/pause.png");
                $(".bg").addClass("pause").removeClass("play");
                $(".play-item").removeClass("rotated");
                $(".play-item").addClass("rotateds");
            }else{
                isPlay = true;
                $(this).attr("src","images/play.png");
                $(".bg").addClass("play").removeClass("pause");
                $(".play-item").addClass("rotated");
                $(".play-item").removeClass("rotateds");
            }
            console.log(isPlay);
        })
    </script>
</body>
</html>